<template>
  <!--出入管理-->
  <div class="flex flex-column ">
    <div class="hm-select-area align-center bg-white font-14">
      <span style="margin-left: 20px;">车牌号</span>
      <el-input v-model="searchObj.car_number" placeholder="请输入车牌号" clearable class="hm-select"></el-input>
     <!-- <el-select v-model="searchObj.parking_lot_id" placeholder="请选择" class="hm-select"  clearable >
        <el-option
          v-for="item in options"
          :key="item.parking_lot_id"
          :label="item.parking_lot_name"
          :value="item.parking_lot_id">
        </el-option>
      </el-select>
      <span>时间</span>
      <el-date-picker
        class="hm-date"
        v-model="dateRangeTime"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
      <span style="margin-left: 20px;">预约状态</span>
      <el-select v-model="searchObj.order_status" placeholder="请选择" class="hm-select"  clearable>
        <el-option
          v-for="item in typeOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select> -->
        <el-button type="primary" @click="getOutData">搜索</el-button>
        <el-button type="primary" @click="reset">重置</el-button>
    </div>
    <div class="home-table-area bg-white flex-sub" >
        <!-- <el-row class="float-right"  style="z-index:999;margin-bottom:20px">
          <div class="flex">
          <div class="flex">
            <el-input class="hta-input" placeholder="搜索姓名等关键字" v-model="searchObj.keywords">
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
            <el-button type="primary" @click="getUserList">搜索</el-button>
          </div>
        </el-row> -->
        <el-table class="home-table" :data="tableData" :header-cell-style="{background:'#F7F7F7',color:'#101010', fontWeight: 'normal'}">
            <el-table-column type="index" width="60" label="序号">
            </el-table-column>
            <el-table-column prop="car_number" label="车牌号" header-align="center" align="center" width="100"></el-table-column>
            <el-table-column prop="userName" label="车主" header-align="center" align="center"></el-table-column>
            <el-table-column prop="phone" label="联系电话" header-align="center" align="center" width="200"></el-table-column>
            <el-table-column prop="parking_lot_name" label="停车场" header-align="center" align="center"></el-table-column>
            <el-table-column prop="areaName" label="区域" header-align="center" align="center"></el-table-column>
            <el-table-column prop="car_place" label="车位" header-align="center" align="center"></el-table-column>
            <el-table-column  v-slot="{row}" label="预约状态" header-align="center" align="center">
            <template >
                {{row.status === 2 ? '取消预约' : '预约成功'}}
            </template>
            </el-table-column>
            <el-table-column label="预约时间" header-align="center" align="center" width="170">
            <template slot-scope="scope">
                {{ dateFormat(scope.row.createTime) }}
            </template>
            </el-table-column>
            <el-table-column prop="inTime" label="入场时间" header-align="center" align="center"></el-table-column>
            <el-table-column prop="outTime" label="出场时间" header-align="center" align="center"></el-table-column>
        </el-table>
        <!-- <el-tabs v-model="activeName" >
          <el-tab-pane label="预约订单" name="first">
            <el-pagination 
              class="hm-page"
              background
              layout="prev, pager, next"
              :total="total" @current-change="sizeChange">
            </el-pagination>
          </el-tab-pane>
          <el-tab-pane label="临停订单" name="second">
            <el-table class="home-table" :data="tableDatas" :header-cell-style="{background:'#F7F7F7',color:'#101010', fontWeight: 'normal'}">
              <el-table-column type="index" width="60" label="序号">
                <template slot-scope="scope">
                  <div>{{(searchObj.page - 1) * searchObj.page_num + scope.$index + 1}}</div>
                </template>
              </el-table-column>
              <el-table-column prop="car_number" label="车牌号" header-align="center" align="center"></el-table-column>
              <el-table-column prop="true_name" label="车主" header-align="center" align="center"></el-table-column>
              <el-table-column prop="phone" label="联系电话" header-align="center" align="center" width="200"></el-table-column>
              <el-table-column prop="parking_lot_name" label="停车场" header-align="center" align="center"></el-table-column>
              <el-table-column prop="parking_place_number" label="车位" header-align="center" align="center"></el-table-column>
              <el-table-column  label="停车状态" header-align="center" align="center">
                <template slot-scope="scope">
                  {{ scope.row.order_status === 'APPOINT' ? '已预约' : scope.row.order_status === 'ADMISSION' ? '已入场' : scope.row.order_status === 'CANCEL' ? '已取消':scope.row.order_status === 'COMPLETE' ? '已完成':scope.row.order_status === 'OVERTIME' ? '已超时':'无' }}
                </template>
              </el-table-column>
              <el-table-column label="停车时间" header-align="center" align="center" width="170">
                <template slot-scope="scope">
                  {{ dateFormat(scope.row.appoint_time) }}
                </template>
              </el-table-column>
            </el-table>
            <el-pagination 
              class="hm-page"
              background
              layout="prev, pager, next"
              :total="totals" @current-change="sizeChange">
            </el-pagination>
          </el-tab-pane>
        </el-tabs>    -->
    
    </div>
  </div>
</template>

<script>
export default {
  name: 'index',
  data () {
    return {
      dateRangeTime: [],
      activeName:'first',
      searchObj: {
        car_number: ''
      },
      typeOptions: [
        {
          label: '已预约',
          value: 'APPOINT'
        },
        {
          label: '已入场',
          value: 'ADMISSION'
        },
        {
          label: '已取消',
          value: 'CANCEL'
        },
        {
          label: '已完成',
          value: 'COMPLETE'
        },
        {
          label: '已超时',
          value: 'OVERTIME'
        }
      ],
      addForm:{
        car_type:'blue',
        car_number:'',
        car_name:'',
        contact_phone:'',
        carnumber:''
      },
      total: 10,
      tableData: [],
      totals: 10,
      tableDatas: [],
      admin_id: '',
      value: '',
      options: []
    }
  },
  mounted () {
    // this.admin_id = this.$store.state.adminId
    // this.getparkingLotListByLoginId()
    this.getOutData()
  },
  methods: {
      reset() { 
          this.searchObj = { 
              car_number : ''
          }
          this.getOutData()
      },
    // 登录者管理的停车场列表
    getparkingLotListByLoginId(){
      // this.$api.parkingLotListByLoginId({admin_id:this.admin_id}).then(res=>{
      //   this.options = res
      // })
    },
    searchType (val) {
      this.getUserList()
    },
    searchTime (val) {
      this.getUserList()
    },
  
    getUserList () {
      this.searchObj.page = 1
      this.getOutData()
    },
    // 获取记录列表
    async getOutData () {
        try{ 
            const { data : res } = await this.$api.Order.getAllOrder({
                ...this.searchObj
            }) 
            if(res.code)return this.$message.error(res.msg)
            this.tableData = res.result
        }catch(e) { 
            console.log(e);
        }
    },
    sizeChange (val) {
      this.searchObj.page = val
      this.getOutData()
    },
        dateFormat(time) {
            let date = new Date(time);
            let str = date.toISOString().replace('T',' ');
            console.log();
            // return str.substr(0, str.lastIndexOf('.'));
            return str?.split(' ')[0]
        },
    // dateFormat (date, fmt = 'yyyy-MM-dd hh:mm:ss') {
    //   date = new Date(date * 1000)
    //   const o = {
    //     'M+': date.getMonth() + 1, // 月份
    //     'd+': date.getDate(), // 日
    //     'h+': date.getHours(), // 小时
    //     'm+': date.getMinutes(), // 分
    //     's+': date.getSeconds(), // 秒
    //     'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
    //     S: date.getMilliseconds() // 毫秒
    //   }
    //   if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)) }
    //   for (const k in o) {
    //     if (new RegExp('(' + k + ')').test(fmt)) {
    //       fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
    //     }
    //   }
    //   return fmt
    // }
  }
}
</script>

<style scoped>
  .flex >>>.el-tabs__nav-wrap::after,.flex >>>.el-tabs__active-bar.is-top{
    width: 0%!important;
  }
  .flex >>>.el-tabs__item.is-top.is-active{
      font-size:18px;
  }
  .hta-input {
    width: 260px;
    margin-right: 23px;
  }
  .hm-date{
    margin: 0 15px;
  }
</style>
